<template>
  <div >
    <basic-container>
      <ul class="tab_menu">
        <li
          v-for="(item, index) in tabMenuArr"
          :key="`tabmenu_${index}`"
          @click="tabChange(index)"
          :class="{ active: classActiveNum === index }" :style="classActiveNum === index?activesStyle:''"
        >{{ item }}</li>
      </ul>
      <component :is="currentView"></component>
    </basic-container>
  </div>
</template>

<script>
import basicInfo from "./basicInfo.vue";
import projectMembers from "./projectMembers.vue";
import projectInfo from "./projectInfo.vue";
import projectGoods from "./projectGoods.vue";
import projectEquipment from "./projectEquipment.vue";
import projectReport from "./projectReport.vue";
import { mapGetters } from "vuex";
import { setStore,removeStore } from '@/util/store'
export default {
  name: "ledgerManage",
  components: {
    basicInfo,
    projectMembers,
    projectInfo,
    projectGoods,
    projectEquipment,
    projectReport
  },
  data() {
    return {
      tabMenuArr: ["基本信息", "项目成员",'项目资料','项目物品','项目设备','项目报告'],
      classActiveNum: 0,
      currentView: "basicInfo",
      componentArr: ["basicInfo", "projectMembers","projectInfo","projectGoods",'projectEquipment','projectReport'],
    };
  },
  computed: {
    ...mapGetters(["theme"]),
    activesStyle(){
      return {"color":this.theme ,"border-bottom": "2px solid "+ this.theme}
    }
  },
  methods: {
    tabChange(index) {
      this.currentView = this.componentArr[index];
      this.classActiveNum = index;
    }
  },
};
</script>

 <style scoped  >
    .tab_menu {
        overflow: hidden;
        margin-bottom: 30px;
        padding-left: 15px;
        background-color: #fff;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
    }
    .tab_menu li {
        float: left;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
        color: #4d4d4d;
        cursor: pointer;
    }
    .tab_menu li.active {
        /* color: #409EFF;
        border-bottom: 2px solid #409EFF; */
        z-index: 99;
        position: relative;
    }
    .tab_menu::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #ebeef5;
      z-index: 1;
  }
</style>
